<template>
	<view class="mainpadding" v-if="pageShow">
		<view class="ershiba xiaohui textcenter margin_top">需支付</view>
		<view class="margin_top1 fonweight textcenter" style="font-size: 60rpx;"><text v-if="Number(payInfo.pay_price)">￥{{payInfo.pay_price}}</text>
		<text class="xiaolan" v-if="Number(payInfo.score)"><text v-if="Number(payInfo.pay_price)">+</text>{{payInfo.score}}积分</text></view>
		<!-- <view class="ershiba xiaohui margin_top1 textcenter">剩余时间 23 : 59 : 59</view> -->
		<view class="" style="margin-top:90rpx;" v-if="payInfo.pay_price">
			<view class=" flexbetween mainpadding" :class="pay_type==10?'yixzbox':'weixbox'" @click="pay_type=10">
				<view class="flexleft">
					<view class="margin_right1">
						<u-icon name="weixin-circle-fill" color="#09BB07" size="28"></u-icon>
					</view>
					<view class="sanshier">微信支付</view>
				</view>
				<view class="weixz margin_right1" v-if="pay_type!=10"></view>
				<view class="margin_right1" v-if="pay_type==10">
					<u-icon name="checkmark-circle-fill" color="#2361FF" size="19"></u-icon>
				</view>
			</view>
			<view class="flexbetween mainpadding margin_top" :class="pay_type==20?'yixzbox':'weixbox'"
				@click="pay_type=20">
				<view class="flexleft">
					<view class="margin_right1">
						<u-icon name="zhifubao-circle-fill" color="#06B4FD" size="28"></u-icon>
					</view>
					<view class="sanshier">支付宝支付</view>
				</view>
				<view class="weixz margin_right1" v-if="pay_type!=20"></view>
				<view class="margin_right1" v-if="pay_type==20">
					<u-icon name="checkmark-circle-fill" color="#2361FF" size="19"></u-icon>
				</view>
			</view>
			<view class="flexbetween mainpadding margin_top" :class="pay_type==30?'yixzbox':'weixbox'"
				@click="pay_type=30">
				<view class="flexleft">
					<view class="margin_right1">
						<u-icon name="rmb-circle-fill" color="#ffa126" size="28"></u-icon>
					</view>
					<view class="sanshier">余额支付</view>
				</view>
				<view class="weixz margin_right1" v-if="pay_type!=30"></view>
				<view class="margin_right1" v-if="pay_type==30">
					<u-icon name="checkmark-circle-fill" color="#2361FF" size="19"></u-icon>
				</view>
			</view>
		</view>
		<!-- 固定底部 -->
		<view class="ffffff mainpadding gudingdb" @click="submit()">
			<view class="bigbtn">确认支付</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				pay_type: 10, //支付方式:10=微信,20=支付宝
				lastmsg: {
					order_id: "", //订单号
					pay_price: "" //支付金额
				},
				payInfo:{},
				pageShow:false
			}
		},
		onLoad(options) {
			this.lastmsg = JSON.parse(decodeURIComponent(options.msg));
			this.getDetail()
		},
		methods: {
			getDetail(){
				httpRequest.request('/api/order/nowPayInfo', 'POST',{
					order_id:this.lastmsg.order_id
				}).then(res => {
					this.payInfo = res.data
					this.pageShow = true
				})
			},
			submit() {
				let data = {
					order_id: this.lastmsg.order_id,
					pay_type: this.pay_type,
				}
				httpRequest.request('/api/order/payment', 'POST',data).then(res => {
					console.log("???????????????",res);
					if(res.code==1){
						if (this.pay_type == 10 && Number(this.payInfo.pay_price)!=0) {//微信支付
							this.appcallPayMent(res.data.appconfig)
						}else if(this.pay_type == 20 && Number(this.payInfo.pay_price)!=0){//支付宝支付
							this.appcallPayMentzfb(res.data.appconfig)
						}else{
							httpRequest.toast("支付成功")
							setTimeout(()=>{
								uni.navigateBack(1)
							},1000)
						}
					}else{
						httpRequest.toast(res.msg)
					}
				})
			},
			appcallPayMent(data) {//微信app支付
				console.log(data, 12312121)
				uni.requestPayment({
					provider: 'wxpay',
					orderInfo: data, //后台返回的支付数据
					success: function(res) {
						uni.navigateBack(1)
					},
					fail: function(err) {
						console.log(err)
					}
				});
			},
			appcallPayMentzfb(data) {//支付宝支付
				console.log(data, 12312121)
				uni.requestPayment({
					provider: 'alipay',
					orderInfo: data, //后台返回的支付数据
					success: function(res) {
						uni.navigateBack(1)
					},
					fail: function(err) {
						console.log(err)
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.weixbox {
		background: #FBFCFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		border: 1rpx solid #FBFCFF;
	}

	.yixzbox {
		background: rgba(35, 97, 255, 0.1);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		opacity: 1;
		border: 1rpx solid #2361FF;
	}
</style>